<template>
  <div>
    <swiper class="box" :options="swiperOption" v-if="showSwiper">
      <swiper-slide v-for="(item,index) of computNum" :key="index">
        <router-link :to="'/a'+items.id" tag="li" v-for="items of item" :key="items.id">
          <img :src="items.imgUrl" :alt="items.desc" />
          <p>{{items.desc}}</p>
        </router-link>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "mainScenic",
  props: {
    iconList: Array
  },
  data () {
    return { 
      swiperOption: {
        pagination: '.swiper-pagination', 
        loop: true,
        autoplay: false
      },
    }
  },
  computed: {
    computNum() {
      var pages = [];
      this.iconList.forEach(function(item, index) {
        const page = Math.floor(index / 8);
        if (!pages[page]) {
          pages[page] = [];
        }
        pages[page].push(item);
      }); 
      return pages;
    },
    showSwiper () {
      return this.iconList.length
    }
  }
};
</script>

<style lang="stylus" scoped>
.box {
  overflow: hidden;
  border-bottom 1px solid #e0e0e0
  padding-bottom: 0.1rem;
  li {
    width: 25%;
    float: left;
    text-align: center;
    padding-top: 0.1rem;
    cursor pointer
    p {
      margin-top: 0.1rem;
      color: #212121;
      font-size: 0.28rem;
    }

    img {
      width: 1.1rem;
      height: 1.1rem;
    }
  }
}
</style> 